<template>
  <div class="code_editor">
    <el-form label-width="170px">
      <el-form-item label="选择已认证的微信公众号">
        <el-select v-model="data.weId" @change="handleSelectWechat" clearable @clear="handleClear">
          <el-option v-for="item,n in wechatList.list" :value="item.appid" :label="item.alias" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择带参数的二维码">
        <el-select v-model="data.codeId" @change="handleSelectCode">
          <el-option v-for="item,n in qrList.list" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传二维码图片">
        <el-upload
          ref="upload"
          :action="`${baseUrl}/content/micro/get/qrcode/applylogo`"
          :headers="headers"
          :data="params"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload">
          <i class="add_logo el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import env from '@/config/env'
  export default {
    props: ['data'],
    data () {
      return {
        fileList: []
      }
    },
    mounted () {
      this.getWechatList()
    },
    computed: {
      ...mapState({
        wechatList: state => state.wechatManage.wechatList,
        qrList: state => state.qrcodeList.qrList
      }),
      baseUrl () {
        return env.baseUrl2
      },
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      },
      // 文件上传附加的参数
      params () {
        return {
          qrId: this.data.codeId
        }
      }
    },
    methods: {
      ...mapActions(['getWechatList', 'getQrList']),
      // 选择公众号
      handleSelectWechat () {
        this.selectedWx = this.wechatList.list.filter(item => item.appid === this.data.weId)[0]
        this.data.url = this.selectedWx.qrcodeUrl
        this.getQrList({
          appid: this.data.weId
        })
      },
      // 选择二维码
      handleSelectCode () {
        const code = this.qrList.list.filter(item => item.id === this.data.codeId)[0]
        this.data.url = code.imageUrl
      },
      // 清除二维码
      handleClear () {
        this.data.url = null
        this.data.codeId = null
      },
      // 上传二维码成功
      uploadSuccess (res) {
        this.data.url = res.data.qrCodeUrl
      },
      beforeUpload (file) {
        if (!this.data.weId) {
          this.$message.warning('请选择公众号')
          return false
        }
        if (!this.data.codeId) {
          this.$message.warning('请选择参数二维码')
          return false
        }
        if (file.type.indexOf('image') === -1) {
          this.$message.warning('只可上传图片类型')
          return false
        }
      }
    }
  }
</script>
<style lang="scss">
  .code_editor{
    .el-form{padding:15px;}
    .add_logo{padding: 15px;background:#fff;border:1px solid #ccc;border-radius:3px;}
  }
</style>
